<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<!-- <view class="title"> -->
				<!-- <img src="/static/images/reg-logo.png"> -->
				<!-- <img :src="shop.cover" style="max-width: 50vw;"> -->
			<!-- </view> -->
			<view>
				<view style="font-size: 2em;font-weight: bold;">您好</view>
				<view style="font-size: 1.5em;line-height: 1.8;margin-bottom: 1em;">欢迎使用中勘养车</view>
			</view>
			<label class="u-border-bottom">
				<view class="tips">昵称/姓名</view>
				<input type="text" v-model="user.name" placeholder="请填写车主姓名/昵称" />
			</label>
			<label class="u-border-bottom">
				<view class="tips">手机号</view>
				<input type="number" v-model="user.mobile" placeholder="请输入手机号" />
			</label>
			<!-- <label class="u-border-bottom" v-if="user.verified!=='yes'">
				<input type="text" v-model="user.sms_code" placeholder="请输入手机验证码" />
				<view class="tips" style="width: 10em;color:red;" @click="getSmsCode">发送验证码 <template v-if="smsTimer>0">({{smsTimer}}s)</template></view>
			</label> -->
			<label class="u-border-bottom">
				<view class="tips">邀请人</view>
				<input type="text" v-model="user.referral_id" placeholder="邀请码" />
			</label>

			<view class="sm-font" style="margin-bottom: 50rpx;">
				<img src="/static/images/selected.png" class="select-icon" v-if="selected" @click="selected=false">
				<img src="/static/images/unselected.png" class="select-icon" v-if="!selected" @click="selected=true">
				<span>注册登陆即表示阅读并同意<text class="link-color" @click="openAgreement">《马孚博士爱车会用户协议》</text>和<text class="link-color" @click="openPrivacy">《隐私条款》</text></span>
			</view>

			<button v-if="user.verified!=='yes'" :disabled="!selected" @tap="submit" class="getCaptcha login-button">注册登陆</button>
			<!-- <view class="login-box"><span class="link-color" @click="openPage('/pages/login/index')">注册了直接登陆</span></view> -->
		</view>

		<view style="position: fixed;bottom: 30rpx;left:0;right:0;text-align: center;font-weight: 400;color:gray;font-size:.8em;">未注册的手机号注册登陆后将自动创建马孚博士爱车会账号</view>

		<wx-share :title='shop.name' :desc="shop.store_introduction" :imgUrl="shop.cover" link="/" ref="wxs"></wx-share>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import install from "@/common/http.interceptor.js"
	export default {
		data() {
			return {
				shop: {},
				user: {},
				selected:true,
				action:this.$baseUrl +'/upload/image',
				fileList:[],
				smsTimer:0,
				imageUploading:false
			}
		},
		computed: {
			inputStyle() {
				let style = {};
				if (this.user.mobile) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['warning'];
				}
				return style;
			}
		},
		onLoad() {
			this.getShop();
			this.getUserInfo();
		},
		methods: {
			openAgreement(){
				if(this.shop.user_agreement_id){
					return this.openPage('/pages/article/detail',{id:this.shop.user_agreement_id})
				}
				this.openPage('/pages/ucp/index')
			},
			openPrivacy(){
				if(this.shop.privacy_article_id){
					return this.openPage('/pages/article/detail',{id:this.shop.privacy_article_id})
				}
				this.openPage('/pages/ucp/index')
			},
			uploadSuccess(data, index, lists, name){
				this.user.vin_image = data.data.full_url
			},
			removeImage(index, lists, name){
				this.user.vin_image = ''
			},
			onProgress(res, index, lists, name){
				this.imageUploading = true
			},
			onUploaded(lists, name){
				this.imageUploading = false
			},
			getSmsCode(){
				if(!this.user.mobile){
					return this.$refs.uToast.show({
						type: 'error',
						icon: false,
						title: '请填写手机号',
						message: "手机号不能为空"
					})
				}
				if(this.smsTimer>0){
					return
				}
				this.$u.post('/user/send-sms-code', {mobile:this.user.mobile}).then(res => {
					console.log(res)
					this.smsTimer = 120
					let ts = setInterval(()=>{
						this.smsTimer--
						if(this.smsTimer<=0){
							clearInterval(ts)
						}
					},1000)

				}).catch(e => {
					console.log(e)
				})
			},
			submit() {
				// if(!this.user.plate_number){
				// 	return this.$refs.uToast.show({
				// 		type: 'error',
				// 		icon: false,
				// 		title: '请填写车牌号',
				// 		message: "车牌号不能为空"
				// 	})
				// }
				console.log(this.user.mobile)
				if (this.user.mobile && this.user.name) {
					this.$u.post('/user/car-user-registration', this.user).then(res => {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						});
						//uni.navigateBack({});
						this.switchTab('/pages/ucp/index')

					}).catch(e => {
						console.log(e)
					})
				}
			},
			switchTab(jumpURL) {
				uni.switchTab({
					url: jumpURL
				})
			},
			getUserInfo() {
				this.$u.post('/user/info', {}).then(res => {
					this.user = res;
					if (this.user.referral_id == 0) {
						this.user.referral_id = '';
					}
				}).catch(e => {
					console.log(e)
				})
			},
			getShop() {
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
				}).catch(e => {

				})
			},
			openPage(jumpURL, params = {}) {
				this.$u.route({
					type: 'to',
					params: params,
					url: jumpURL,
					animationType: 'slide-in-bottom'
				});
			},
			uploadPic(e) {
				var form = e.target
				var fileObj = form.files[0];
				var that = this
				let reader = new FileReader();
				reader.onload = (evt) => {
					var base64 = evt.target.result;
					var image = new Image();
					image.onload=function(){
						let form = new FormData()
						form.append('file',fileObj)
						that._imgAjax(form)
					}
					image.src = base64;
					form.value = ''
				}
				reader.readAsDataURL(fileObj);
			},
			_imgAjax(form) {
				this.loading = true
				$.ajax({
					type: 'POST',
					url: '/upload/image',
					data: form,
					dataType: 'json',
					cache: false,
					processData: false,
					contentType: false,
				}).then(res => {
					this.loading = false
					if (res.code === 200 && res.data.full_url) {
						if (window.ws && window.ws.readyState === WebSocket.OPEN) {
							let data = {cmd: 'message.send', data: {to: this.friend.friend_uid, message: '$IMG$'+res.data.full_url, msg_id: (new Date()).getTime()}}
							window.ws.send(JSON.stringify(data))
						} else {
							alert('网终连接断开，请刷新页面再试')
						}
					} else {
						alert('图片发送失败')
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;

		.content {
			width: 600rpx;
			margin: 80rpx auto 0;

			.title {
				text-align: center;
				font-size: 48rpx;
				font-weight: 500;
				margin-bottom: 50rpx;
				img{
					max-width: 100%;
				}
			}

			label{
				display: flex;
				// border-bottom: 1px solid #dbdbdb;
				margin-bottom: 18rpx;
				padding:18rpx 0;
			}

			input {
				text-align: left;
				// margin-bottom: 10rpx;
				// padding-bottom: 6rpx;
			}

			input[short]{
				width:4em;
			}

			.tips {
				color: $u-type-info;
				// margin-bottom: 44rpx;
				// margin-top: 18rpx;
				color: #02396a;
				width: 7em;
			}
			.link-color{
				color:#195ED7;
			}

			.getCaptcha {
				background-color: #195ED7;
				color: $u-tips-color;
				color: #fff;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;

				&::after {
					border: none;
				}
			}

			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}

			.u-border-bottom::after{
				border-color: #9d9ea0;
			}

			uni-input{
				// padding-bottom:20rpx;
			}
			.sm-font{
				font-size: .9em;
				margin-bottom: 1em;
				line-height: 1.8;
			}
			.login-box{
				text-align: right;
				padding: 40rpx 0 50rpx 0;
			}
			.select-icon{
				height: 28rpx;
				display: inline-block;
				margin-right: .5em;
			}
		}

		.buttom {
			.loginType {
				display: flex;
				padding: 350rpx 150rpx 150rpx 150rpx;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: $u-content-color;
					font-size: 28rpx;
				}
			}

			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $u-tips-color;

				.link {
					color: $u-type-warning;
				}
			}
		}
		.login-button{
			color: rgb(255, 255, 255);
			background-color: rgb(255, 153, 0);
		}
		.login-button[disabled]{
			background-color: gray;
		}


	}

</style>
